import React, { PureComponent } from 'react'
import { setTitle, scale, tooltip, mapLineStyle, mapEffectStyle, baseTextStyle, colors } from '../chart/util/common'

class TemperImg extends PureComponent {

    constructor () {
        super()
        this.state = {
            hover: false
        }
    }

    handMouseEnter = () => {
        this.setState({
            hover: true
        })
    }
    handMouseLeave = () => {
        this.setState({
            hover: false
        })
    }

    render () {
        const {d, size, boxScale} = this.props
        // 鼠标移入放大
        const zoom = this.state.hover ? 2 : 1
        // 鼠标移入放大会超出布局边界；需要向左偏移
        let transformLeft = 0
        if (this.state.hover) {
            if (d.pos[0] * size[0] + 6 * 10 / boxScale * 2 > size[0]) {
                transformLeft = 6 * 10 / boxScale
            }
        }

        return (
            <g className="temper-device-group"
                // style={this.getStyle(d.pos)}
               onMouseEnter={this.handMouseEnter}
               onMouseLeave={this.handMouseLeave}>
                {/*背景*/}
                <rect x={d.pos[0] * size[0] - transformLeft}
                      y={d.pos[1] * size[1]}
                      width={6 * 10 / boxScale * zoom }
                      height={6 * 2.5 / boxScale * zoom}
                      style={{
                          fill: '#FFFFCC'
                      }}/>


                {/*湿度*/}
                <text x={d.pos[0] * size[0] - transformLeft}
                      y={d.pos[1] * size[1] + 6 / boxScale * zoom}
                      style={{
                          fontSize: 6 / boxScale * zoom + 'px',
                          fill: '#000',
                      }}>
                    {d.humidity + '%'}
                </text>
                {/*温度*/}
                <text x={d.pos[0] * size[0] + 6 * 5 / boxScale * zoom - transformLeft}
                      y={d.pos[1] * size[1] + 6 / boxScale * zoom}
                      style={{
                          fontSize: 6 / boxScale * zoom + 'px',
                          fill: '#000',
                      }}>
                    {d.temperature + '°C'}
                </text>
                {/*sensorId*/}
                <text x={d.pos[0] * size[0] - transformLeft}
                      y={d.pos[1] * size[1] + 6 * 2 / boxScale * zoom}
                      style={{
                          fontSize: 6 / boxScale * zoom + 'px',
                          fill: '#000',
                      }}>
                    {d.sensorId}
                </text>

            </g>
        )
    }

}

export default TemperImg